<template>
  <div class="chat-user-container">
    <div class="container-header">
      在线人数：{{ userOnlineList.length }}
    </div>
    <n-scrollbar :style="contentStyle" class="container-list">
      <div v-for="user in userOnlineList" :key="user.username" class="list-item">
        <n-avatar
          round
          :size="30"
          :src="`${urlPrefix}${user.avatar}`"
        />
        <span class="user-name">{{ user.username }}</span>
      </div>
    </n-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
import { storeToRefs } from "pinia";
import { useGlobSetting } from "@/hooks/setting";
import { useImChatStore } from "@/store/modules/imchat";

const imChatStore = useImChatStore();
const { urlPrefix } = useGlobSetting();
const { userOnlineList } = storeToRefs(imChatStore);

const contentStyle = reactive({
  maxHeight: '410px'
})

const resizeHandler = () => {
  contentStyle.maxHeight = `${document.body.clientHeight - 118 - 35 - 20}px`;
}

onMounted(async () => {
  window.addEventListener('resize', resizeHandler)
  resizeHandler()
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler)
})
</script>

<style lang="less" scoped>
.chat-user-container {
  height: 100%;
  overflow-y: hidden;
  border-radius: 10px;
  background-color: #E5E4E4;

  .container-header {
    height: 35px;
    line-height: 35px;
    padding-left: 10px;
    font-size: 16px;
    user-select: none;
  }

  .container-list {

    .list-item {
      display: flex;
      padding: 5px 10px;
      height: 30px;
      user-select: none;

      .user-name {
        line-height: 30px;
        padding-left: 10px;
      }
    }
  }
}
</style>
